<template>
    <div class="body_background" :style="GetWindowBackground">
        <div class="body_background">
            <ul class="address-box block-box">
                <li>
                    <label>收货人</label>
                    <input v-model="obj.name" placeholder="请输入收货人姓名"/>
                </li>
                <li>
                    <label>性别</label>
                    <div class="radio-box">
                        <mt-radio
                                v-model="obj.gender"
                                :options="genderArr">
                        </mt-radio>
                    </div>
                </li>
                <li>
                    <label>联系方式</label>
                    <input v-model="obj.phone" placeholder="请输入手机号"/>
                </li>
                <li>
                    <label>收货地址</label>
                    <select v-model="obj.city" @change="getSelected">
                        <option :value="coupon.id" v-for="coupon in couponList">{{coupon.name}}</option>
                    </select>
                </li>
                <li>
                    <label>收货人</label>
                    <input v-model="obj.address" placeholder="请输入详细地址"/>
                </li>
            </ul>
            <mt-button type="primary" class="button-save white-color" @click="addressSaveFun">保存</mt-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "addressView",
        data() {
            return {
                id: '',
                obj: {
                    name: '张三',
                    gender: '2',
                    phone: '15122222222',
                    city: 1,
                    address: '地址对对对'
                },
                genderArr: [
                    {
                        label: '先生',
                        value: '1'
                    }, {
                        label: '女士',
                        value: '2'
                    }
                ],
                couponList: [
                    {
                        id: '1',
                        name: '技术部'
                    },
                    {
                        id: '2',
                        name: '财务部'
                    }
                ],
                GetWindowBackground: {
                    'min-height': ''
                },
            }
        },
        mounted() {
            this.id = this.$route.query.id;//编辑地址的id
            //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
            this.obj.city = this.id == '' ? this.couponList[0].id : this.obj.city;
        },
        methods: {
            //获取选中
            getSelected() {
                console.log(this.obj.city)
            },
            //保存地址
            addressSaveFun() {
                console.log('保存地址', this.obj)
                this.$router.push('/ShopSetOrder')
            },
            getBodyHeight() {
                // 获取浏览器高度，减去顶部搜索栏和导航栏的值 55 + 50（可动态获取）,再减去底部高度值60
                this.GetWindowBackground['min-height'] = window.innerHeight + 'px'
            },
        },
        // 生命周期 - 创建完成（可以访问当前this实例）
        created() {
            window.addEventListener('resize', this.getBodyHeight) // 注册监听器
            this.getBodyHeight() // 页面创建时先调用一次
        },
        // 生命周期 - 销毁完成
        destroyed() {
            window.removeEventListener('resize', this.getBodyHeight)
        },

    }
</script>

<style lang="scss" scoped>

    .address-box {
        margin: 20px auto;
        li {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 15px;
            color: #2E3155;
            input, select {
                width: calc(100% - 100px);
                height: 30px;
                border: 0;
                outline: none;
                list-style: none;
            }
            label {
                width: 80px;
                text-align: left;
            }
            .radio-box {
                font-size: 14px;
            }

        }
    }

    .button-save {
        background: #05c569;
        border-radius: 10px;
        font-size: 15px;
        width: 60%;
        position: fixed;
        bottom: 30px;
        left: 20%;
    }


</style>